<template>
  <div class="comment_content">
    <div class="comment_content_title">
      共{{topicData.commentList ? topicData.commentList.length : 0}}条评论
    </div>
    <div class="comment_content_section">
      <!--评论区-->
      <div class="comment_content_section_list" v-for="item in topicData.commentList" :key="item.id">
        <div class="comment_content_section_list_title">
          <div class="comment_content_section_list_title_user">
            <el-avatar shape="square" size="small"
                       src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
            <p style="margin-left: 10px">{{item.user.fullName || item.user.username}}</p>
          </div>
          <div class="comment_content_section_list_title_time">
            {{item.createdAt || item.updatedAt}}
          </div>
        </div>
        <div class="comment_content_section_list_content">
          {{item.description}}
        </div>
        <div class="comment_content_section_list_thumb">
          <div :class="['pointer', {
            'is-active': item.fabulous
          }]" @click="likeComment(item)"><span class="iconfont icon-dianzan"></span> {{item.fabulousNums}}</div>
          <div @click="replayComment(item)" class="pointer" style="margin-left: 20px"><span class="iconfont icon-icon_reply"></span> 回复</div>
          <!-- <div @click="handleDelete(item)" class="pointer" style="margin-left: 20px;margin-top: 3px;"><i class="el-icon-delete-solid"></i> 删除</div> -->
        </div>
        <div v-show="item.reply" class="add_comment">
          <el-input placeholder="写下你的评论" size="small" v-model="input" clearable></el-input>
          <el-button :loading="loadingReply" @click="replyInfo(item)" type="success" size="small">回复</el-button>
        </div>
        <!--追评-->
        <div class="comment_content_section_list" style="padding-left: 20px" v-for="item2 in item.topicCommentReplyDtos" :key="item2.id">
          <div class="comment_content_section_list_title">
            <div class="comment_content_section_list_title_user">
              <el-avatar shape="square" size="small"
                         src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
              <p style="margin-left: 10px">{{item2.user.username||''}}</p>
            </div>
            <div class="comment_content_section_list_title_time">
              {{item2.createdAt || item2.updatedAt}}
            </div>
          </div>
          <div class="comment_content_section_list_content">
            {{item2.description}}
          </div>
          <div class="comment_content_section_list_thumb">
            <div :class="['pointer', {
            'is-active': item2.fabulous
          }]" @click="likeComment(item2, item.id)"><span class="iconfont icon-dianzan"></span> {{item2.fabulousNums}}</div>
            <!--<div @click="replayComment(item2)" class="pointer" style="margin-left: 20px"><span class="iconfont icon-icon_reply"></span> 回复</div>-->
          </div>
          <!--<div v-show="item2.reply" class="add_comment">-->
            <!--<el-input placeholder="写下你的评论" size="small" v-model="input" clearable></el-input>-->
            <!--<el-button :loading="loadingReply" @click="replyInfo(item, item2)" type="success" size="small">回复</el-button>-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <!--<div class="comment_content_pagination">-->
      <!--<el-pagination-->
        <!--@size-change="handleSizeChange"-->
        <!--@current-change="handleCurrentChange"-->
        <!--:current-page.sync="currentPage3"-->
        <!--:page-size="100"-->
        <!--layout="prev, pager, next, jumper"-->
        <!--:total="1000">-->
      <!--</el-pagination>-->
    <!--</div>-->
    <div class="add_comment">
      <el-input placeholder="写下你的评论" size="small" v-model="commentData.description" clearable></el-input>
      <el-button :loading="loading" @click="createComment" type="success" size="small">发布</el-button>
    </div>
  </div>
</template>

<script>
  import { createComment, commentlike, deleteTopicCount } from '@/api/topic'
  export default {
    name: 'commentContent',
    props: {
      topicData: {
        type: Object,
        default: () => {
          return {
            commentList: []
          }
        }
      }
    },
    data() {
      return {
        input: null,
        currentPage3: 5,
        commentList: [],
        loading: false,
        loadingReply: false,
        commentData: {
          name: null,
          description: null,
          topicId: this.$route.query.id,
          isReply: false
        }
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      createComment() {
        if (!this.commentData.description) {
          return this.$message.warning('请输入内容')
        }
        this.loading = true
        createComment(this.commentData).then(response => {
          this.commentData.description = null
          this.$emit('updateComment', response.data.results)
          this.$message.success('发布成功')
          this.loading = false
        }).catch((error) => {
          this.loading = false
        })
      },
      replayComment(data) {
        this.$emit('updateStatus', data)
      },
      handleDelete(item){
        deleteTopicCount(item.id).then(response=> {
          console.log(response)
          this.$message.success('删除成功')
        })
      },
      replyInfo(data) {
        this.loadingReply = true
        createComment({
          topicId: this.$route.query.id,
          isReply: true,
          parentId: 0,
          description: this.input,
          topicCommentId: data.id
        }).then(response => {
          this.loadingReply = false
          this.input = null
          this.$emit('updateStatus', data)
        }).catch(err => {
          this.loadingReply = false
        })
      },
      likeComment(data, parentId) {
        commentlike({
          topicId: data.id,
          isReply: !!parentId,
          parentId: parentId || 0
        }).then(response => {
          this.loadingReply = false
          if (data.fabulous) {
            data.fabulous = false
            data.fabulousNums = data.fabulousNums || 0
            data.fabulousNums -= 1
          } else {
            data.fabulous = true
            data.fabulousNums = data.fabulousNums || 0
            data.fabulousNums += 1
          }
          this.input = null
        }).catch(err => {
          this.loadingReply = false
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .comment_content {
    .el-button {
      background-color: #01540C;
      border: #01540C;
      margin-left: 10px;
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  .comment_content {
    margin-bottom: 50px;
    border: 1px solid #F1F1F1;

    .comment_content_title {
      font-weight: bold;
      border-bottom: 1px solid #F1F1F1;
      padding: 20px;
    }

    .comment_content_section {
      padding: 20px;

      .comment_content_section_list {
        padding-bottom: 20px;
        padding-top: 20px;
        border-bottom: 1px solid #F1F1F1;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          border: none;
        }

        .comment_content_section_list_title {
          font-weight: bold;
          font-size: 16px;
          line-height: 30px;
          display: flex;
          justify-content: space-between;

          .comment_content_section_list_title_user {
            display: flex;
          }

          .comment_content_section_list_title_time {
            font-weight: normal;
            font-size: 14px;
            color: #808080;
          }
        }

        .comment_content_section_list_content {
          text-indent: 2em;
          line-height: 24px;
          font-size: 14px;
        }

        .comment_content_section_list_thumb {
          display: flex;
          color: #808080;
          padding: 10px 0 0 0;
        }
      }

    }
    .comment_content_pagination {
      text-align: center;
      padding: 10px 0;
      border-top: 1px solid #F1F1F1;
    }
    .add_comment {
      display: flex;
      padding: 10px;
      border-top: 1px solid #F1F1F1;
    }
  }
  .is-active{
    color: #01540c;
  }
</style>
